$main-color: #000;
$border-color: #bbbbbb;

html,
body {
  // font-family: Helvetica Neue, Helvetica, sans-serif;
  letter-spacing: 1px;
  // font-family: "Microsoft YaHei", SimSun, "\5b8b\4f53", sans-serif;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: $main-color;
  min-width: 1440px;
}

.texth4{
  font-size: 20px;
  color: #000;
  font-weight: 300;
  text-align: center;
  line-height: 48px;
}

html,
body,
div,
ul,
li,
dl,
dt,
dd,
button,
table,
tbody,
thead,
tfoot,
tr,
td,
th,
input,
textarea,
nav,
header,
footer,
menu,
section,
aside,
article,
details,
form,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  &::after {
    box-sizing: border-box;
  }

  &::before {
    box-sizing: border-box;
  }
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}


//滚动条
.scrollBox,
.el-table__body-wrapper,
.el-tree,
.el-dialog__wrapper,
.el-transfer-panel__body .el-transfer-panel__list {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.scrollBox::-webkit-scrollbar,
.el-table__body-wrapper::-webkit-scrollbar,
.el-tree::-webkit-scrollbar,
.el-transfer-panel__body .el-transfer-panel__list::-webkit-scrollbar,
.el-dialog__body::-webkit-scrollbar,
.el-tab-pane::-webkit-scrollbar,
.sketchpad-box::-webkit-scrollbar,
.prism-editor-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 7px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 7px;
}

.scrollBox::-webkit-scrollbar-thumb,
.el-table__body-wrapper::-webkit-scrollbar-thumb,
.el-tree::-webkit-scrollbar-thumb,
.el-transfer-panel__body .el-transfer-panel__list::-webkit-scrollbar-thumb,
.el-dialog__body::-webkit-scrollbar-thumb,
.el-tab-pane::-webkit-scrollbar-thumb,
.sketchpad-box::-webkit-scrollbar-thumb,
.prism-editor-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  -webkit-box-shadow: inset 0 0 1px rgba(225, 225, 225, 0.2);
  background: rgba(225, 225, 225, 0.2);
  border-radius: 0;
}

.scrollBox::-webkit-scrollbar-track,
.el-table__body-wrapper::-webkit-scrollbar-track,
.el-tree::-webkit-scrollbar-track,
.el-transfer-panel__body .el-transfer-panel__list::-webkit-scrollbar-track,
.el-dialog__body::-webkit-scrollbar-track,
.el-tab-pane::-webkit-scrollbar-track,
.sketchpad-box::-webkit-scrollbar-track,
.prism-editor-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: rgba(225, 225, 225, 0.35);
  border-radius: 0;
}

.el-message {
  top: 20px !important;
}
.el-message:not(:last-child) {
  visibility: hidden;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.text-bold {
  font-weight: bold;
}

.flex {
  display: flex;
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.ai-center {
  align-items: center;
}

.ai-start {
  align-items: flex-start;
}

.ai-end {
  align-items: flex-end;
}

.jc-center {
  justify-content: center;
}

.jc-start {
  justify-content: flex-start;
}

.jc-end {
  justify-content: flex-end;
}

.jc-between {
  justify-content: space-between;
}

.jc-around {
  justify-content: space-around;
}

.flex-elps {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  width: 0;
}

.fr {
  float: right;
}


.fl {
  float: left;
}

.pos-rel {
  position: relative;
}

.pos-xcenter {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

// 垂直水平居中
.pos-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// 边框
.border {
  border: 1px solid $border-color;

  @each $short,
  $long in l left,
  t top,
  r right,
  b bottom {

    // 缩写版，结果如： border-l
    &-#{$short} {
      border-#{$long}: 1px solid $border-color;
    }
  }
}

// 框的类型
@each $short,
$long in i inline,
b block,
ib inline-block {
  .ds-#{$short} {
    display: $long;
  }
}

// 定位类型
@each $short,
$long in rela relative,
abso absolute,
fixed fixed {
  .#{$short} {
    position: $long;
  }
}

// 文字对齐方式
@each $k in left,
center,
right {
  .text-#{$k} {
    text-align: $k;
  }
}

// 定义字体(px)单位，大于或等于12的都为px单位字体
@each $i in (12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50) {
  .fs-#{$i} {
    font-size: $i + px;
  }
}

// 定义文字行数
@for $i from 1 through 3 {
  .text-wrap-#{$i} {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    line-clamp: $i;
    word-break: break-all;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
  }
}

// 定义flex等分
@for $i from 0 through 12 {
  .flex-#{$i} {
    flex: $i;
  }
}

// 定义内外边距，历遍0-80
@each $i in (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80) {

  // 得出：margin-30或者m-30
  .m-#{$i} {
    margin: $i + px;
  }

  .my-#{$i} {
    margin-top: $i + px;
    margin-bottom: $i + px;
  }

  .mx-#{$i} {
    margin-left: $i + px;
    margin-right: $i + px;
  }

  // 得出：padding-30或者p-30
  .p-#{$i} {
    padding: $i + px;
  }

  .py-#{$i} {
    padding-top: $i + px;
    padding-bottom: $i + px;
  }

  .px-#{$i} {
    padding-left: $i + px;
    padding-right: $i + px;
  }

  @each $short,
  $long in l left,
  t top,
  r right,
  b bottom {

    // ml-30
    // 定义外边距
    .m#{$short}-#{$i} {
      margin-#{$long}: $i + px;
    }

    // 定义内边距
    .p#{$short}-#{$i} {
      padding-#{$long}: $i + px;
    }

    // bottom left rigth top
    .#{$short}-#{$i} {
      #{$long}: $i + px;
    }
  }
}

.darkColor {
  color: #595959;
}

.lightColor {
  color: #3333;
}
.fontColor{
  color: #303133;
}
.redColor {
  color: red;
}

.blueColor {
  color: #4A99F6;
}

// 16px标题大字
.biaoti1 {
  font-size: 16px;
  font-weight: 600;
  padding-right: 20px;
  color: #262626;
}
// 灰色字体小字
.zhengwen2 {
  color: #595959;
}
.globalpPagination {
  padding: 25px 0;
  text-align: center;
}
.darkBlack{
  font-weight: 500;
  font-family: Arial,sans-serif;
}
.cursor{
  cursor:default;
}
.cursorPointer{
  cursor:pointer;
}